<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-03-29 09:18:53
 * @LastEditTime: 2024-04-02 09:08:35
 * @FilePath: \env-manager-pc\src\views\document\manager\create\access\edit.vue
-->
<script setup lang="ts">
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import { useInitForm, useRules } from './page'
import type { ModelOpen } from '@/types/page'
import { useRoles } from '@/utils/dataHook'
import useUserStore from '@/store/modules/user'
import { ModelType } from '@/types/common'
import userApi from '@/api/modules/user'

const props = defineProps({
  currentEntInfo: {
    type: Object,
    default: () => ({}),
  },
})
const emits = defineEmits(['submit'])
const userStore = useUserStore()

const dialogVisible = ref(false)
const { formData, initForm } = useInitForm(props.currentEntInfo)
const formRef = ref<FormInstance>()
const btnLoading = ref(false)
const modelType = ref(ModelType.add)
const roles = useRoles()

const rules = useRules(userStore.userInfo.AccountType)

function open(options: ModelOpen) {
  modelType.value = options.type
  if (options.data) {
    formData.value = { ...options.data }
    formData.value.Roles = Object.keys(options.data.Roles).map(key => key)
  }
  else {
    initForm()
  }
  dialogVisible.value = true
}

const isEdit = computed(() => modelType.value === ModelType.edit)

function doLoading(flag: boolean) {
  btnLoading.value = flag
}

function submit() {
  formRef.value?.validate((vaild) => {
    if (vaild) {
      const data: any = { ...formData.value, Roles: {} }
      formData.value.Roles.forEach((id) => {
        data.Roles[id] = ''
      })
      emits('submit', data, doLoading)
    }
  })
}

async function resetPwd() {
  try {
    await ElMessageBox.confirm(`确定重置 ${formData.value.Name} 密码吗？`, '提示', {
      type: 'warning',
    })
    doLoading(true)
    await userApi.ResetAccountPassword({ accountCode: formData.value.AccountCode })
    ElMessage.success({
      message: '重置成功',
      type: 'success',
    })
    doLoading(false)
  }
  catch (err) {
    doLoading(false)
  }
}

function close() {
  dialogVisible.value = false
  btnLoading.value = false
  initForm()
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    title="账号编辑"
    width="80%"
    top="1%"
    draggable
    @closed="close"
  >
    <div class="max-h-[65vh] w-full overflow-x-hidden overflow-y-auto">
      <ElForm ref="formRef" label-width="180px" label-position="top" label-suffix="：" :model="formData" :rules="rules">
        <ElRow :gutter="30">
          <ElCol :span="12">
            <ElFormItem label="账号" prop="AccountCode">
              <ElInput v-model="formData.AccountCode" :disabled="isEdit" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="姓名" prop="Name">
              <ElInput v-model="formData.Name" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="状态" prop="StateID">
              <el-radio-group v-model="formData.StateID" class="ml-4">
                <el-radio :label="0">
                  停用
                </el-radio>
                <el-radio :label="1">
                  正常
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="有效期" prop="ExpirTime">
              <el-date-picker
                v-model="formData.ExpirTime"
                class="w-full!"
                type="date"
                placeholder="选择有效期"
                formate-value="YYYYMMDD"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="备注" prop="StateRemark">
              <ElInput v-model="formData.StateRemark" type="textarea" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="角色" prop="Roles">
              <el-select
                v-model="formData.Roles"
                multiple
                placeholder="请选择角色"
                class="w-full"
              >
                <el-option
                  v-for="item in roles"
                  :key="item.ObjID"
                  :label="item.Name"
                  :value="item.ObjID"
                />
              </el-select>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="联系电话" prop="ContactTel">
              <ElInput v-model="formData.ContactTel" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="消息推送电话" prop="MsgTel">
              <ElInput v-model="formData.MsgTel" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="绑定微信号" prop="WxOpenID">
              <ElInput v-model="formData.WxOpenID" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="最后登录时间" prop="LogonTime">
              <ElInput v-model="formData.LogonTime" disabled />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-if="isEdit" type="primary" :loading="btnLoading" @click="resetPwd">
          重置密码
        </el-button>
        <el-button type="primary" :loading="btnLoading" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
